<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../dist/theme/gray.css"/>
	<link rel="stylesheet" type="text/css" href="css/main.css"/>
	<title>jquery-tab demo - customized title element</title>
</head>
<body>
<dl class="region">
	<dt>Structural Rules</dt>
	<dd>
		<p>Title elements become tab labels.</p>
		<p>Any rest contents until next title element become tab panel contents.</p>
	</dd>

	<dt>Customized Title Elements</dt>
	<dd>
		Title elements does not have to be `h1` to `h6`.
		Use `titleSelector` option to customize title element.
	</dd>

	<dt>JavaScript</dt>
	<dd>
		<code>
		<pre>
		$('.region').tab({
			titleSelector: 'dt'
		});
		</pre>
		</code>
	</dd>
</dl>

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../dist/jquery-tab.js"></script>
<script type="text/javascript">
	$('.region').tab({
		titleSelector: 'dt'
	});
</script>
</body>
</html>